<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>18jQuery操作类相关方法</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .class1{
                width: 100px;
                height: 100px;
                background: red;
            }
            .class2{
                border: 10px solid #000;
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            $(function (param) {
                /*
                1.addClass(class|fn)
                作用：添加类
                如果要添加多个，类名用空格隔开

                2.removeClass([class|fn])
                作用：删除类
                如果要删除多个，类名用空格隔开

                3.toggleClass(class|fn[,sw])
                //作用：切换类
                有就删除，没有就添加
                */
                var btns=document.getElementsByTagName("button");
                btns[0].onclick=function(){
                    // $("div").addClass("class1");
                    $("div").addClass("class1 class2");
                }
                btns[1].onclick=function(){
                    $("div").removeClass("class2");
                }
                btns[2].onclick=function(){
                    $("div").toggleClass("class1 class2");
                }
              });
        </script>
    </head>
    <body>
        <button>添加类</button>
        <button>删除类</button>
        <button>更新类</button>
        <div></div>
    </body>
</html>